<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>


  <div class="container">
    <h1>SEARCH</h1>
    <nav>
      <div class="nav-wrapper">
        <form>
          <div class="input-field">
            <input id="search" type="search" required>
            <label class="label-icon" for="search">
              <i class="material-icons">search</i>
            </label>
            <i class="material-icons">close</i>
          </div>
        </form>
      </div>
    </nav>

    <h1>CAROUSEL</h1>
    <div class="carousel">
      <a href="#one!" class="carousel-item">
        <img src='https://dummyimage.com/1920x1080/dd182b/ccc.png' alt='' />
      </a>
      <a href="#two!" class="carousel-item">
        <img src='https://dummyimage.com/1920x1080/#000/ccc.png' alt='' />
      </a>
      <a href="#three!" class="carousel-item">
        <img src='https://dummyimage.com/1920x1080/dd115c/ccc.png' alt='' />
      </a>
      <a href="#four!" class="carousel-item">
        <img src='https://dummyimage.com/1920x1080/dd182b/ccc.png' alt='' />
      </a>
      <a href="#five!" class="carousel-item">
        <img src='https://dummyimage.com/1920x1080/dd182b/ccc.png' alt='' />
      </a>
    </div>

    <!-- CAROUSEL FULLSLIDER -->

    <h1>CAROUSEL FULL SLIDER</h1>
    <div class="carousel carousel-slider">
      <a href="#one!" class="carousel-item">
        <img src='https://dummyimage.com/800x400/dd182b/ccc.png' alt='' />
      </a>
      <a href="#two!" class="carousel-item">
        <img src='https://dummyimage.com/800x400/#000/ccc.png' alt='' />
      </a>
      <a href="#three!" class="carousel-item">
        <img src='https://dummyimage.com/800x400/dd115c/ccc.png' alt='' />
      </a>
      <a href="#four!" class="carousel-item">
        <img src='https://dummyimage.com/800x400/dd182b/ccc.png' alt='' />
      </a>
      <a href="#five!" class="carousel-item">
        <img src='https://dummyimage.com/800x400/dd182b/ccc.png' alt='' />
      </a>
    </div>

    <!-- collapsible
 -->

    <h1>collapsible</h1>
    <ul class="collapsible" data-collapsible="accordion">
      <li>
        <div class="collapsible-header">
          <i class="material-icons">
            filter_drama
          </i>First
        </div>
        <div class="collapsible-body">
          <span>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi quas optio voluptas beatae atque totam eos minus. Veniam
            assumenda quidem sint voluptates, libero aliquid tempora, iure deleniti dolores dicta iste. Quis vitae cum hic
            corporis, totam magnam dolor reprehenderit fuga facilis vel ducimus, molestias fugiat facere quaerat sint iste
            a voluptate. Quas explicabo culpa nulla veniam quisquam magni minima eveniet. Nam maiores vero perspiciatis quasi
            soluta ipsa voluptatum, perferendis asperiores doloribus ducimus quidem porro ex sequi, laboriosam hic quam accusantium
          </span>
        </div>
      </li>
      <li>
        <div class="collapsible-header">
          <i class="material-icons">
            filter_drama
          </i>First
        </div>
        <div class="collapsible-body">
          <span>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi quas optio voluptas beatae atque totam eos minus. Veniam
            assumenda quidem sint voluptates, libero aliquid tempora, iure deleniti dolores dicta iste. Quis vitae cum hic
            corporis, totam magnam dolor reprehenderit fuga facilis vel ducimus, molestias fugiat facere quaerat sint iste
            a voluptate. Quas explicabo culpa nulla veniam quisquam magni minima eveniet. Nam maiores vero perspiciatis quasi
            soluta ipsa voluptatum, perferendis asperiores doloribus ducimus quidem porro ex sequi, laboriosam hic quam accusantium
            eaque sit. Repudiandae unde neque asperiores porro nemo commodi error. Nam similique incidunt eum facilis suscipit
            ut eveniet debitis officiis, corporis possimus ex dignissimos eligendi, dolores cupiditate maiores id quibusdam
            corrupti? Sequi laboriosam laudantium sint itaque recusandae unde sed expedita. Commodi, autem vero deserunt
            nemo id, nam doloribus neque consequatur nihil delectus ipsa asperiores dolor officiis blanditiis modi. Nostrum
            veniam, quod dolore nam quibusdam neque similique pariatur ea ipsa temporibus. Est expedita voluptatibus corrupti
            sed deleniti eveniet a consequatur, facilis hic reiciendis quo dolorum maxime possimus eaque impedit velit eum
            ducimus laborum ex ipsam asperiores. In a illum eius vel. Sunt adipisci incidunt rem delectus nostrum? Qui tenetur
            magni accusantium nam saepe maiores sunt iure facilis cumque necessitatibus blanditiis nihil, voluptatem nisi
            nulla, aut nemo vero quam at tempora. Qui. Praesentium pariatur saepe quas dolorum adipisci quidem aspernatur
            expedita, optio aliquam iusto reiciendis quisquam corporis dolorem nisi veritatis culpa, unde natus possimus
            maiores ducimus quaerat veniam soluta similique! Itaque, facere? Fugit ad quisquam modi fuga temporibus praesentium
            magnam qui dicta? Ullam atque quos veniam neque! Adipisci fuga mollitia harum consequatur, cum quasi, quas sed
            architecto optio doloribus eaque facilis impedit. Omnis deserunt rerum possimus iste sunt repellat laboriosam
            aperiam natus, modi obcaecati consectetur atque itaque reiciendis deleniti ipsa amet asperiores laudantium dolores
            voluptates debitis odit ad! Expedita repellendus asperiores repudiandae.
          </span>
        </div>
      </li>
      <li>
        <div class="collapsible-header ">
          <i class="material-icons">
            filter_drama
          </i>First
        </div>
        <div class="collapsible-body">
          <span>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi quas optio voluptas beatae atque totam eos minus. Veniam
            assumenda quidem sint voluptates, libero aliquid tempora, iure deleniti dolores dicta iste. Quis vitae cum hic
            corporis, totam magnam dolor reprehenderit fuga facilis vel ducimus, molestias fugiat facere quaerat sint iste
            a voluptate. Quas explicabo culpa nulla veniam quisquam magni minima eveniet. Nam maiores vero perspiciatis quasi
            soluta ipsa voluptatum, perferendis asperiores doloribus ducimus quidem porro ex sequi, laboriosam hic quam accusantium
            eaque sit. Repudiandae unde neque asperiores porro nemo commodi error. Nam similique incidunt eum facilis suscipit
            ut eveniet debitis officiis, corporis possimus ex dignissimos eligendi, dolores cupiditate maiores id quibusdam
            corrupti? Sequi laboriosam laudantium sint itaque recusandae unde sed expedita. Commodi, autem vero deserunt
            nemo id, nam doloribus neque consequatur nihil delectus ipsa asperiores dolor officiis blanditiis modi. Nostrum
            veniam, quod dolore nam quibusdam neque similique pariatur ea ipsa temporibus. Est expedita voluptatibus corrupti
            sed deleniti eveniet a consequatur, facilis hic reiciendis quo dolorum maxime possimus eaque impedit velit eum
            ducimus laborum ex ipsam asperiores. In a illum eius vel. Sunt adipisci incidunt rem delectus nostrum? Qui tenetur
            magni accusantium nam saepe maiores sunt iure facilis cumque necessitatibus blanditiis nihil, voluptatem nisi
            nulla, aut nemo vero quam at tempora. Qui. Praesentium pariatur saepe quas dolorum adipisci quidem aspernatur
            expedita, optio aliquam iusto reiciendis quisquam corporis dolorem nisi veritatis culpa, unde natus possimus
            maiores ducimus quaerat veniam soluta similique! Itaque, facere? Fugit ad quisquam modi fuga temporibus praesentium
            magnam qui dicta? Ullam atque quos veniam neque! Adipisci fuga mollitia harum consequatur, cum quasi, quas sed
            architecto optio doloribus eaque facilis impedit. Omnis deserunt rerum possimus iste sunt repellat laboriosam
            aperiam natus, modi obcaecati consectetur atque itaque reiciendis deleniti ipsa amet asperiores laudantium dolores
            voluptates debitis odit ad! Expedita repellendus asperiores repudiandae.
          </span>
        </div>
      </li>
      <li>
        <div class="collapsible-header">
          <i class="material-icons">
            filter_drama
          </i>First
        </div>
        <div class="collapsible-body">
          <span>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi quas optio voluptas beatae atque totam eos minus. Veniam
            assumenda quidem sint voluptates, libero aliquid tempora, iure deleniti dolores dicta iste. Quis vitae cum hic
            corporis, totam magnam dolor reprehenderit fuga facilis vel ducimus, molestias fugiat facere quaerat sint iste
            a voluptate. Quas explicabo culpa nulla veniam quisquam magni minima eveniet. Nam maiores vero perspiciatis quasi
            soluta ipsa voluptatum, perferendis asperiores doloribus ducimus quidem porro ex sequi, laboriosam hic quam accusantium
            eaque sit. Repudiandae unde neque asperiores porro nemo commodi error. Nam similique incidunt eum facilis suscipit
            ut eveniet debitis officiis, corporis possimus ex dignissimos eligendi, dolores cupiditate maiores id quibusdam
            corrupti? Sequi laboriosam laudantium sint itaque recusandae unde sed expedita. Commodi, autem vero deserunt
            nemo id, nam doloribus neque consequatur nihil delectus ipsa asperiores dolor officiis blanditiis modi. Nostrum
            veniam, quod dolore nam quibusdam neque similique pariatur ea ipsa temporibus. Est expedita voluptatibus corrupti
            sed deleniti eveniet a consequatur, facilis hic reiciendis quo dolorum maxime possimus eaque impedit velit eum
            ducimus laborum ex ipsam asperiores. In a illum eius vel. Sunt adipisci incidunt rem delectus nostrum? Qui tenetur
            magni accusantium nam saepe maiores sunt iure facilis cumque necessitatibus blanditiis nihil, voluptatem nisi
            nulla, aut nemo vero quam at tempora. Qui. Praesentium pariatur saepe quas dolorum adipisci quidem aspernatur
            expedita, optio aliquam iusto reiciendis quisquam corporis dolorem nisi veritatis culpa, unde natus possimus
            maiores ducimus quaerat veniam soluta similique! Itaque, facere? Fugit ad quisquam modi fuga temporibus praesentium
            magnam qui dicta? Ullam atque quos veniam neque! Adipisci fuga mollitia harum consequatur, cum quasi, quas sed
            architecto optio doloribus eaque facilis impedit. Omnis deserunt rerum possimus iste sunt repellat laboriosam
            aperiam natus, modi obcaecati consectetur atque itaque reiciendis deleniti ipsa amet asperiores laudantium dolores
            voluptates debitis odit ad! Expedita repellendus asperiores repudiandae.
          </span>
        </div>
      </li>
    </ul>


    <h1>Toasts</h1>
    <a href="#" onclick="Materialize.toast('成功登陆',4000,'rounded')" class="btn">TOASTS</a>

    <!-- TOOLTIPS -->
    <h1>tooltips</h1>
    <a href="" class="btn tooltipped" data-position="top" data-tooltip="I am tooltip" data-delay="100">Hover me</a>
    <a href="" class="btn tooltipped" data-position="bottom" data-tooltip="I am tooltip">Hover me</a>
    <a href="" class="btn tooltipped" data-position="left" data-tooltip="I am tooltip">Hover me</a>
    <a href="" class="btn tooltipped" data-position="right" data-tooltip="I am tooltip">Hover me</a>


    <!-- dropdowns -->
    <h1>DROPDOWN</h1>
    <a href="#" class="dropdown-button btn" data-activates="dropdown1">
      <i class="material-icons">arrow_downward</i>
    </a>
    <ul id="dropdown1" class="dropdown-content">
      <li>
        <a href="">one</a>
      </li>
      <li>
        <a href="">two</a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="">three</a>
      </li>
      <li>
        <a href="">
          <i class="material-icons">view_module</i>four</a>
      </li>
      <li>
        <a href="">
          <i class="material-icons">cloud</i>five</a>
      </li>
    </ul>



    <!-- Materialize BOXED -->

    <h1>Materialize boxed</h1>
    <img style="width:40%" src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-586302.jpg" alt="" class="materialboxed"
      data-caption="图片CAPTION">

    <!-- SLIDER  -->

    <H1>SLIDER
      <small>需要初始化</small>
    </H1>

    <div class="slider">
      <ul class="slides">
        <li>
          <img src="http://lorempixel.com/580/250/nature/6" alt="">
          <div class="caption center-align">
            <h3>This is our tagline</h3>
            <h5 class="light grey-text text-lighten-3">Here is our slogan</h5>
          </div>
        </li>
        <li>
          <img src="http://lorempixel.com/580/250/nature/4" alt="">
          <div class="caption left-align">
            <h3>This is our tagline</h3>
            <h5 class="light grey-text text-lighten-3">Here is our slogan</h5>
          </div>
        </li>
        <li>
          <img src="http://lorempixel.com/580/250/nature/2" alt="">
          <div class="caption right-align">
            <h3>This is our tagline</h3>
            <h5 class="light grey-text text-lighten-3">Here is our slogan</h5>
          </div>
        </li>
      </ul>
    </div>

    <h1>MODAL
      <small>需要初始化,不知道为啥加载不成功</small>
    </h1>
    <!-- modal trigger -->
    <!-- FIXME:这下面有问题，加载不出来 -->
    <a href="#modal1" class="btn waves-effect">modal 1</a>
    <a href="#modal2" class="btn waves-effect red">modal 2</a>

    <!--modal 结构-->
    <div class="modal" id="modal1">
      <div class="modal-content">
        <h4>modal header</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, voluptates nemo. Obcaecati vero saepe delectus
          libero odio, repudiandae illum quod autem incidunt ea voluptate officia suscipit blanditiis. Veniam, pariatur sapiente?</p>
      </div>
      <div class="modal-footer">
        <a href="" class="modal-action modal-close waves-effect waves-green">
          button
        </a>
      </div>
    </div>

    <div class="modal" id="modal2">
      <div class="modal-content">
        <h4>modal 2 header</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, voluptates nemo. Obcaecati vero saepe delectus
          libero odio, repudiandae illum quod autem incidunt ea voluptate officia suscipit blanditiis. Veniam, pariatur sapiente?</p>
      </div>
      <div class="modal-footer">
        <a href="" class="modal-action modal-close waves-effect waves-green">
          button
        </a>
      </div>
    </div>


    <!-- Side Nav -->

    <h1>SLIDE NAV
      <small>需要初始化</small>
      <a href="#" data-activates="slide-out" class="btn button-collapse">
        <i class="material-icons">menu</i>
      </a>
    </h1>

    <!-- <ul id="slide-out" class="side-nav">
      <li>
        <div class="user-view">
        <div class="background">
          <img src="https://dummyimage.com/400x250/dd182b.jpg">
        </div>
        <a href="#!user"><img class="circle" src="https://dummyimage.com/200x200/00bcd4.jpg"></a>
        <a href="#!name"><span class="white-text name">John Doe</span></a>
        <a href="#!email"><span class="white-text email">jdandturk@gmail.com</span></a>
      </div>
    </li>
      <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
      <li><a href="#!">Second Link</a></li>
      <li><div class="divider"></div></li>
      <li><a class="subheader">Subheader</a></li>
      <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
    </ul> -->

    <h1>Drop Down</h1>

    <ul id="slide-out" class="side-nav">
      <li>
        <a href="#!">First Sidebar Link</a>
      </li>
      <li>
        <a href="#!">Second Sidebar Link</a>
      </li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
          <li>
            <a class="collapsible-header">Dropdown
              <i class="material-icons">arrow_drop_down</i>
            </a>
            <div class="collapsible-body">
              <ul>
                <li>
                  <a href="#!">First</a>
                </li>
                <li>
                  <a href="#!">Second</a>
                </li>
                <li>
                  <a href="#!">Third</a>
                </li>
                <li>
                  <a href="#!">Fourth</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </li>
    </ul>

    <a href="#" data-activates="slide-out" class="button-collapse">
      <i class="material-icons">menu</i>
    </a> -->

    <h1>Full sec</h1>

    <!-- <ul id="slide-out" class="side-nav">
      <li><a href="#!">First Sidebar Link</a></li>
      <li><a href="#!">Second Sidebar Link</a></li>
    </ul>
    <a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="material-icons">menu</i></a> -->



    <!-- <ul id="slide-out" class="side-nav fixed">
      <li><a href="#!">First Sidebar Link</a></li>
      <li><a href="#!">Second Sidebar Link</a></li>
    </ul>
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a> -->

    <!-- tabs -->

    <h1>tabs</h1>

    <div class="row">
      <div class="col s12">
        <ul class="tabs">
          <li class="tab col s3">
            <a href="#test1">Test 1</a>
          </li>
          <li class="tab col s3 ">
            <a href="#test2">Test 2</a>
          </li>
          <li class="tab col s3">
            <a class="active" href="#test3">Test 3</a>
          </li>
          <li class="tab col s3 disabled">
            <a href="#test4">Test 4</a>
          </li>
        </ul>
      </div>

      <div id="test1" class="col s12">test1</div>
      <div id="test2" class="col s12">test2</div>
      <div id="test3" class="col s12">test3</div>
      <div id="test4" class="col s12">test4</div>
    </div>

    <!-- TAB TARGET -->

    <div class="fixed-action-btn" style="bottom:45px;right:24px;">
      <a id="menu" onclick="$('.tap-target').tapTarget('open')" class="waves-effect waves-light btn btn-floating btn-large cyan">
        <i class="material-icons">
          menu
        </i>
      </a>
    </div>
    <a onclick="$('.tap-target').tapTarget('open')" class="waves-effect waves-light btn cyan">
      open tab target
    </a>
    <a onclick="$('.tap-target').tapTarget('close')" class="waves-effect waves-light btn cyan">
      close tab target
    </a>

    <!-- tab target content -->

    <div class="tap-target cyan" data-activates="menu">
      <div class="tap-target-content white-text">
        <h5>Tab target content</h5>
        <p class="white-text">re edit hic? Dicta accusamus quae mollitia dolorum magnam doloremque quisquam fuga laudantium labore beatae sunt
          velit, necessitatibus dolor in recusandae minus aspernatur.</p>
      </div>
    </div>






































  </div>
  <!--./container-->



  <div class="parallax-container">
    <div class="parallax">
      <img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-586302.jpg">
    </div>
  </div>
  <div class="section white">
    <div class="row container">
      <h2 class="header">Parallax</h2>
      <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground
        content while scrolling.</p>
    </div>
  </div>
  <div class="parallax-container">
    <div class="parallax">
      <img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-594464.jpg">
    </div>
  </div>


  <h1>floationgbutton</h1>
  <a class="btn-floating">
    <i class="material-icons">
      add
    </i>
  </a>

  <div style="height:500px;"></div>
  <le></le>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <script>
    $(document).ready(function () {
      $('.carousel').carousel();
      // slider
      $('.carousel').carousel({
        fullWidth: true
      });

      // fire off toast
      // Materialize.toast('Hello world',3000);
      // 初始化slider
      $('.slider').slider();

      // 初始化 modal
      $('.modal').modal();
      // side-nav
      $('.button-collapse').sideNav();

      $('.parallax').parallax();
    });
  </script>
</body>

</html>